<template>
    <el-container style="height: 35em;" v-loading="loading">
        <div class="side-categories" >

        </div>
        <div class="education-urls-containers">
            <div class="cate-item" v-for="cate in categories" :key="cate">
                <h1 style="font-size: 33px;">{{ cate }}</h1>
                <div class="url-item" v-for="item in eduUrls[cate]">
                    <ul>
                        <a :href="item.fields.url" target="_blank">{{ item.fields.title }}</a>
                    </ul>
                </div>
            </div>
        </div>
    </el-container>
</template>

<script lang="ts" setup>
    import { get, post } from '../../axios/api';
    import { computed, onBeforeMount, ref } from 'vue';
    import { ElMessage, rowProps } from 'element-plus'
    
    let loading = ref(false);
    let eduUrls:any = ref([])
    let categories: any = ref([])
    let initCategory = 'Deep Learning'

    async function getData(category: string) {
        let res:any = {}
        loading.value = true
        try {
            res = await post('/get_education_urls/', {category: category})
            if (res && res.success) {
                console.log(res)
                eduUrls.value = res.list
                categories.value = res.categories
                loading.value = false
            }
        } catch (error:any) {
            loading.value = false
            ElMessage({
                message: error,
                type: 'error',
            })
        }
    }

    onBeforeMount(() => {
        getData(initCategory)
    })

</script>

<style scoped>

    .education-urls-containers {
        width: 80%;
        margin-left: 50px;
        margin-top: 50px;
    }

    .url-item a {
        /* color: #000; */
        font-size: 20px;
        text-decoration: none;
    }

    .url-item a:hover {
        color: #006621;
        text-decoration: none;
    }
</style>